<template>
  <el-dialog
    title="添加"
    :visible.sync="dialogisShow"
    width="width"
    @close="close"
  >
    <el-form ref="form" :model="formData" label-width="80px" :rules="formRules">
      <el-form-item label="链接类型" prop="type">
        <el-select v-model="formData.type" placeholder="">
          <!-- label是显示和回显的数据 value的值是添加给formData -->
          <el-option
            v-for="item in type"
            :key="item.type"
            :label="item.name"
            :value="item.type"
          />
        </el-select>
      </el-form-item>
      <el-form-item v-if="formData.type ==='1'" label="标题" prop="title">
        <el-input v-model="formData.title" />
      </el-form-item>
      <el-form-item label="链接地址" prop="url">
        <el-input v-model="formData.url" />
      </el-form-item>
      <el-form-item label="链接描述" prop="des">
        <el-input v-model="formData.des" />
      </el-form-item>
      <el-form-item v-if="formData.type === '2'" label="链接图片" prop="img">
        <el-upload
          class="upload-demo"
          action="#"
          :file-list="fileList"
          list-type="picture"
          :http-request="httpRequest"
        >
          <el-button size="small" type="primary">点击上传</el-button>
          <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div>
        </el-upload>
      </el-form-item>
    </el-form>
    <template>
      <el-row type="flex" justify="end">
        <el-button @click="dialogisShow = false">取 消</el-button>
        <el-button type="primary" @click="addlinkInfoApi">确 定</el-button>
      </el-row>
    </template>
  </el-dialog>
</template>

<script>
import { UploadFile } from '@/api/user'
import { addlinkInfoApi, updatelinkInfoApi } from '@/api/adv_link'
import bus from '@/components/bus'
export default {
  name: 'PopUpLink',
  data() {
    return {
      fileList: '',
      type: [
        {
          name: '文字链接',
          type: '1'
        },
        {
          name: '图片链接',
          type: '2'
        }
      ],
      dialogisShow: false,
      formData: {
        type: '',
        title: '', // 文字链接标题
        des: '', // 链接描述
        url: '', // 链接地址
        img: '' // 图片链接
      },
      // 表单验证规则
      formRules: {
        type: [{ required: true, message: '请输入', trigger: 'blur' }],
        title: [{ required: true, message: '请输入', trigger: 'blur' }],
        des: [{ required: true, message: '请输入', trigger: 'blur' }],
        url: [{ required: true, message: '请输入', trigger: 'blur' }],
        img: [{ required: true, message: '请输入', trigger: 'blur' }]
      }
    }
  },
  computed: {
  },
  mounted() {
    // 接受传来的个人信息
    bus.$on('data', data => {
      this.formData = data
      this.fileList = [{ url: `${data.img}` }]
      this.dialogisShow = true
    })
  },
  methods: {
    showImgUrl(url) {
      return process.env.VUE_APP_BASE_API + '/' + url
    },
    // 自定义图片上传
    async httpRequest(result) {
      const fd = new FormData()
      fd.append('file', result.file)
      const res = await UploadFile(fd)
      console.log(res)
      this.formData.img = res.savePath
      this.formData.url = res.savePath
    },
    // 修改之后提示文案
    message() {
      this.$message.success('操作成功')
      this.dialogisShow = false
      this.$emit('getlinkListApi')
    },
    // 确定提交
    async addlinkInfoApi() {
      if (this.formData.id) {
        // 编辑
        await this.$refs.form.validate()
        await updatelinkInfoApi(this.formData)
        this.message()
      } else {
        // 新增
        await this.$refs.form.validate()
        await addlinkInfoApi(this.formData)
        this.message()
      }
    },
    // 关闭触发
    close() {
      // 清除校验状态
      this.$refs.form.clearValidate()
      this.formData = {
        type: '',
        title: '', // 文字链接标题
        des: '', // 链接描述
        url: '', // 链接地址
        img: '' // 图片链接
      }
    }
  }
}
</script>

<style>

</style>
